<script type="text/javascript"><!--//--><![CDATA[//><!--

var grid_reload = function(){
	$('#datagrid').datagrid('reload', $('#fm_search').serializeObject());
};
	//mdstruktur_id_div, mdstruktur_id_dep, mdstruktur_id_cls, satuan_id, kemasan_id, barang_barcode, barang_kode, barang_nama, barang_nm, 
	//barang_ppn, barang_qty1, barang_hjual1, barang_margin1, barang_qty2, barang_hjual2, barang_margin2, barang_qty3, barang_hjual3, barang_margin3, 
	//barang_diskon, barang_hpokok, barang_stok_min, barang_stok_max, barang_image, barang_tipe, barang_limit_max, barang_limit_min, 
	//barang_keterangan, barang_status_aktif, satuan_id_besar, kemasan_id_besar, div, dep, cls, supp_id, barang_status_level, kms_karton, 
	//supplier, path, harga
	$(document).ready(function() { 
		// Setup Datagrid
		$('#datagrid').datagrid({  
			url:gs_path+'/'+controller+'/getdata', 
			queryParams: $('#fm_search').serializeObject(),
			height:340,
			pagination:true,
			columns:[[
			{ field : 'ck', checkbox:true, width: 40, align: 'center' },
			{ field : 'barang_kode', title : 'Kode Barang', width : 100, sortable:true },
			{ field : 'barang_nama', title : 'Nama Barang', width : 250, sortable:true },
			{ field : 'barang_barcode', title : 'Barcode Barang', width : 250, sortable:true },
			{ field : 'barang_ppn', title : 'PPN Barang', width : 100, sortable:true },
			{ field : 'harga', title : 'Harga', width : 100, sortable:true }
			]]
		});
		//$('#filter_app_id').settext({ data: <?php echo json_encode($arr_application); ?> });
		
		// Setup Form
		$('#form_master').setupForm([
			{ name: 'mdstruktur_id_div', type: 'lov', data: <?php echo json_encode($combodiv); ?>, size: 'medium'}, 
			{ name: 'mdstruktur_id_dep', type: 'text', size: 'medium', maxlength: 250, noempty:true },
			/*{ name: 'departemen', type: 'combo', data: <?php echo json_encode($combodiv)?>, size 'medium'},*/ 
			{ name: 'mdstruktur_id_cls', type: 'text', size: 'medium', maxlength: 250, noempty:true },
			{ name: 'barang_barcode', type: 'text', size: 'medium', maxlength: 250, noempty:true},
			{ name: 'barang_kode', type: 'text', size: 'medium', maxlength: 250, noempty:true },
			{ name: 'barang_tipe', type: 'text', size: 'short', maxlength: 250, noempty:true },
			{ name: 'barang_status_aktif', type: 'text', size: 'short', maxlength: 250, noempty:true },			
			{ name: 'barang_nama', type: 'text', size: 'long', maxlength: 250 },
			{ name: 'barang_nm', type: 'text', size: 'long', maxlength: 250 },
			{ name: 'kemasan_id', type: 'lov', data: <?php echo json_encode($combokemasan); ?>, size: 'medium'},
			{ name: 'satuan_id', type: 'lov', data: <?php echo json_encode($combosatuan); ?>, size: 'medium' },
			{ name: 'satuan_id_besar', type: 'lov', data: <?php echo json_encode($combokemasan); ?>, size: 'medium' },
			{ name: 'kemasan_id_besar', type: 'lov', data: <?php echo json_encode($combosatuan); ?>, size: 'medium' },
			{ name: 'barang_hpokok', type: 'text', size: 'short', maxlength: 250 },
			{ name: 'stock_barang', type: 'text', size: 'short', maxlength: 250 },
			{ name: 'gambar_barang', type: 'text', size: 'long', maxlength: 250 },
			{ name: 'barang_keterangan', type: 'text', size: 'long', maxlength: 250 },
			{ name: 'barang_qty1', type: 'text', size: '4', maxlength: 250 },
			{ name: 'barang_margin1', type: 'text', size: '6', maxlength: 250 },
			{ name: 'barang_hjual1', type: 'text', size: '10', maxlength: 250 },
			{ name: 'barang_qty2', type: 'text', size: '4', maxlength: 250 },
			{ name: 'barang_margin2', type: 'text', size: '6', maxlength: 250 },
			{ name: 'barang_hjual2', type: 'text', size: '10', maxlength: 250 },
			{ name: 'barang_qty3', type: 'text', size: '4', maxlength: 250 },
			{ name: 'barang_margin3', type: 'text', size: '6', maxlength: 250 },
			{ name: 'barang_hjual3', type: 'text', size: '10', maxlength: 250 },
			{ name: 'barang_stok_min', type: 'text', size: '23', maxlength: 250 },
			{ name: 'barang_stok_max', type: 'text', size: '24.5', maxlength: 250 },
			{ name: 'barang_limit_min', type: 'text', size: '23', maxlength: 250 },
			{ name: 'barang_limit_max', type: 'text', size: '24.5', maxlength: 250 },			
			]);

		// Create Dialog
		$('#dialog_container').dialog({
			closed:true,
			modal:true,
			title: '_',
			width:830,
			height:600,
			buttons:[{
				text:'Save',
				iconCls:'icon-save',
				handler:function(){
					$('#form_master').submitForm('/'+controller+'/ajax_post', { onComplete : function(){ $('#dialog_container').dialog('close'); $('#datagrid').datagrid('reload'); }} );					
				}
			},{
				text:'Close',
				iconCls:'icon-cancel',
				handler:function(){
					$('#dialog_container').dialog('close');
				}
			}]
		});
	
		//cabang_id, cabang_kode, cabang_nama, cabang_npwp, cabang_nopkp, cabang_tglpkp, cabang_alamat, cabang_telp, cabang_fax, cabang_tipe
		// Set Action Button
		var buttons = [ { label: 'Add', icon: 'add', onclick: function() {
			resetError();
			$('#dialog_container').dialog('open');
			$('#form_master').data('mode', 'create');
			$('#form_master').parent().parent().parent().prev().find('.panel-title').html('Setup Barang');
			$('#barang_kode').readonly(false);
			$('#barang_nama').readonly(false);
			$('#barang_hpokok').readonly(true);
			$('#barang_margin1').readonly(true);
			$('#barang_hjual1').readonly(true);
			$('#barang_margin2').readonly(true);
			$('#barang_hjual2').readonly(true);
			$('#barang_margin3').readonly(true);
			$('#barang_hjual3').readonly(true);
			$('#stock_barang').readonly(true);
			$('#barang_kode').focus();
		} },
		{ label: 'Edit', icon: 'edit', onclick: function() {
			var oSel=$('#datagrid').datagrid('getSelected'); 
			if(oSel==null){ alert('Please select row!'); }
			else{
				resetError();
				$('#dialog_container').dialog('open'); 
				$('#form_master').data('mode', 'edit');
				$('#form_master').parent().parent().parent().prev().find('.panel-title').html('Edit Cabang');
				$('#barang_kode').readonly();
				jsonToForm(oSel); 
				$('#barang_id').val(oSel['barang_id']);
				$('#mdstruktur_id_dep').val(oSel['mdstruktur_id_dep']);
				$('#mdstruktur_id_cls').val(oSel['mdstruktur_id_cls']);
				$('#barang_tipe option[value='+oSel['barang_tipe']+']').attr("selected",true);
				$('#barang_status_aktif').val(oSel['barang_status_aktif']);
				$('#barang_id').val(oSel['barang_id']);
				$('#barang_nama').focus();
				console.log(oSel['barang_tipe']);
			} 
		} },
		{label: 'Delete', icon: 'delete', onclick: function() { 
			var oSel = $('#datagrid').datagrid('getSelected'); 
			if (oSel == null) { 
				$.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
			} else { 
				deleteData(['barang_kode']);
			} 
		}},
		{ label: 'Print', icon: 'print', onclick: function() {
			var oSel = $('#datagrid').datagrid('getSelected');
			if (oSel == null) {
				$.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
			} else {
				window.open(gs_path+'/'+controller+'/cetak/?kode_barang='+urlencode(oSel.kode_barang), 'myWin', 'height=500,width=700,status=yes,toolbar=no,menubar=yes,location=no,scrollbars=yes');
			}
		}},
		{ label: 'Print to Excel', icon: 'print', onclick: function() {
			window.location = gs_path + '/' + controller + '/print_excel';
		}},
		];
		setAction(buttons);
	});
	
		
		$('#fm_search').focusFirst();
	

//--><!]]></script>

<head>
<style type="text/css"><!--
fieldset.inline-block{
    display: inline-block;
    float: left;
}
    .main {
		width: 100%;
		height: 700px;
		margin: 0;
		background: #f2f2f2;
	}
	.wrapper {
		width: 100%;
		height: 100%;
		background: #f6f6f6;

	}

	.ttpfield {
		margin-bottom: 30px;
		margin-right: 10px;
		width: 52%;
		height: 50px;
		float: left;
	}
	.ttsfield {
		margin-right: 5px;
		margin-bottom: 45px;
		width: 32%;
		height: 60px;
		float: left;
	}

	.ttgfield {
		margin-right: 14px;
		margin-bottom: 45px;
		width:47%;
		height: 60px;
		float: left;
	}

	.ttqfield {
		margin-top: 10px;
		margin-bottom: 45px;
		margin-right: 10px;
		width: 100%;
		height: 80px;
		float: left;
	}
	.ttyfield {
		margin-top: 10px;
		margin-right: 10px;
		width: 40%;
		height: 170px;
		float: right;
	}

}
--></style>
</head>

<div id="tb" style="padding:5px;height:auto">
	<div>
		<form id="fm_search" onsubmit="grid_reload(); return false;">
			<table class="tb_form" style="margin-bottom:0px">

				<tr>
					<td width="100">Keyword</td>
					<td><input type="text" id="keyword" name="keyword" class="textfield medium" />
						<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="grid_reload(); return false;">Search</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<div id="datagrid" toolbar="#tb"></div>

<div id="dialog_container" style="padding:5px;width:600px;height:250px;">
		<form id="form_master">
			<div class="ttqfield">
				<table class="tb_form" style="display:none;margin-bottom:0px;" cellpadding="0" cellspacing="0">    
					<tr>
						<td class="label">Divisi :</td><td class="label">Departemen :</td><td class="label">Class :</td>
					</tr>
					<tr>
						<input type="hidden" id="barang_id" name="barang_id" />
						<td><input id="mdstruktur_id_div" /></td>
						<td><select id="mdstruktur_id_dep" name="mdstruktur_id_dep"></select></td>
						<td><select id="mdstruktur_id_cls" name="mdstruktur_id_cls"></select></td>
					</tr>
				</table>
				<table>
					<tr>
						<td class="label">Barcode :</td><td class="label">Kode Barang :</td><td class="label">Tipe Barang :</td><td class="label">Status Barang :</td>
					</tr>
					<tr>
						<td><input id="barang_barcode" /></td><td><input id="barang_kode" /></td>
						<td><select id="barang_tipe" name="barang_tipe">
							<option value=""></option>
							<option value="D">Barang Dagang</option>
							<option value="B">Bukan Barang Dagang</option>
						</select></td>
						<td><select id="barang_status_aktif" name="barang_status_aktif">
							<option value=""></option>
							<option value="Y">Barang Dagang</option>
							<option value="T" selected>Bukan Barang Dagang</option>
						</select></td>
					</tr>
				</table>
			</div>
			<div class="ttpfield">
				<table>
					<tr>
						<td class="label" style="width:100px">Nama Barang :</td><td><input id="barang_nama" /></td>
					</tr>
					<tr>
						<td class="label" style="width:100px">Nama Singkat :</td><td><input id="barang_nm" /></td>
					</tr>
				</table>
			</div>
			<div class="ttyfield">
				<img id="media_preview" src="" alt="" style="max-height:100px; max-width:150px;display:block; display:block; " />
			</div>
			<div class="ttpfield">
				<fieldset class="inline-block">
					<legend>Pemesanan</legend>
					<table>
						<tr>
							<td class="label">Kemasan :</td><td class="label">Satuan :</td><td class="label">Kemasan Besar :</td> <td class="label">Satuan Besar :</td>
						</tr>
						<tr>
							<td><select id="kemasan_id" name="kemasan_id"></select></td><td><select id="satuan_id" name="satuan_id"/></select></td><td><select id="satuan_id_besar" name="satuan_id_besar"></select></td><td><select id="kemasan_id_besar" name="kemasan_id_besar"></select></td>
						</tr>
					</table>
				</fieldset>
			</div>
		<div class="ttqfield">
			<table>
				<tr>
					<td class="label">Harga Pokok</td> <td class="label">BKP (10%) :</td><td class="label">Stock Barang :</td>
				</tr>
				<tr>
					<td><input id="barang_hpokok" /></td><td><input type="checkbox" id="bkp" name="bkp" /></td><td><input id="stock_barang" /></td>
				</tr>
			</table>
			<table>
				<tr>
					<td class="label">Gambar Barang :</td>
					<td><input id="gambar_barang" /></td>
				</tr>
				<tr>
					<td class="label">Keterangan</td>
					<td><input id="barang_keterangan" /></td>
				</tr>
			</table>
		</div>
			<div class="ttsfield">
				<fieldset class="inline-block">
					<legend>Harga Jual 1</legend>
					<table>
						<tr>
							<td class="label">Qty :</td><td class="label">Margin (%) :</td><td class="label">Harga Jual</td>
						</tr>
						<tr>
							<td><input id="barang_qty1" size="5" /></td><td><input id="barang_margin1" /></td><td><input id="barang_hjual1" /></td>
						</tr>
					</table>
				</fieldset>
			</div>
			<div class="ttsfield">
				<fieldset class="inline-block">
					<legend>Harga Jual 2</legend>
					<table>
						<tr>
							<td class="label">Qty :</td><td class="label">Margin (%) :</td><td class="label">Harga Jual</td>
						</tr>
						<tr>
							<td><input id="barang_qty2" /></td><td><input id="barang_hjual2" /></td><td><input id="barang_margin2" /></td>
						</tr>
					</table>
				</fieldset>
			</div>
			<div class="ttsfield">
				<fieldset class="inline-block">
					<legend>Harga Jual 3</legend>
					<table>
						<tr>
							<td class="label">Qty :</td><td class="label">Margin (%) :</td><td class="label">Harga Jual</td>
						</tr>
						<tr>
							<td><input id="barang_qty3" /></td><td><input id="barang_margin3" /></td><td><input id="barang_hjual3" /></td>
						</tr>
					</table>
				</fieldset>
			</div>
			<div class="ttgfield">
				<fieldset class="inline-block">
					<legend>Stock Gudang</legend>
					<table>
						<tr>
							<td class="label">Minimum :</td><td class="label">Maksimum :</td>
						</tr>
						<tr>
							<td><input id="barang_stok_min" /></td><td><input id="barang_stok_max" /></td>
						</tr>
					</table>
				</fieldset>
			</div>
			<div class="ttgfield">
				<fieldset class="inline-block">
					<legend>Stock Pembelian</legend>
					<table>
						<tr>
							<td class="label">Minimum :</td><td class="label">Maksimum :</td>
						</tr>
						<tr>
							<td><input id="barang_limit_min" /></td><td><input id="barang_limit_max" /></td>
						</tr>
					</table>
				</fieldset>
			</div>
		</form>  
	</div>

<!-- Chaerul Call ajax -->
<script type="text/javascript">
	$("#mdstruktur_id_div").change(function() {
		var selectedValue = this.value;
	    //make the ajax call
	    $.ajax({
	    	url: gs_path+'/'+controller+'/getDepartemen/',
	    	type: 'POST',
	    	dataType: 'json',
	    	data: {option : selectedValue},
	    })
	    .done(function(data){ 
	    	$("#mdstruktur_id_dep").append('<option id="" value=""></option>');
	    	$.each( data, function( key, val ) {
	    		$("#mdstruktur_id_dep").append('<option id="" value="'+val.value+'">'+val.display+'</option>');
	    	});
	    });
	});

	$("#mdstruktur_id_dep").change(function() {
		var selectedValue = this.value;
	    //make the ajax call
	    $.ajax({
	    	url: gs_path+'/'+controller+'/getClass/',
	    	type: 'POST',
	    	dataType: 'json',
	    	data: {option : selectedValue},
	    })
	    .done(function(data){ 
	    	$("#mdstruktur_id_cls").append('<option id="" value=""></option>');
	    	$.each( data, function( key, val ) {
	    		$("#mdstruktur_id_cls").append('<option id="" value="'+val.value+'">'+val.display+'</option>');
	    	});
	    });
	});
</script>